<template>
	<view class="content">
		<view class="header">
			<view class="user_info_wrap">
				<view class="text">商品</view>
				<view class="sarch">
					<u-search :showAction="false" bgColor="#fff" placeholder="搜索商品" shape="square" class="sousuo"
						v-model="fromData.name" @search="refresh({
					page: 1
				})" style="width: 100%;"></u-search>
				</view>
				<view style="white-space: nowrap;color: rgba(3, 185, 209, 1);" @click="renew()">更新</view>
			</view>
			<view class="swiper">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
		</view>
		<view class="category">
			<view class="category_header">
				<view class="yuan"></view>
				<view class="header_text">全部商品</view>
				<view class="xian"></view>
			</view>
			<view class="goodsBox">
				<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
					<view class="goods">
						<view class="goods-item" v-for="(item, index) in goodsData" :key="index">
							<view class="tupian">
								<u--image :src="item.img" width="140rpx" height="140rpx"></u--image>
							</view>
							<view class="box">
								<view class="goods-item-text">{{item.name}}</view>
								<view class="goods-box">
									<view class="box-let">
										<view class="kucun">库存：{{item.quantity}}</view>
										<view class="box-let-text"><span style="font-size: 20rpx;
										font-weight: 500;">￥</span>{{item.money}}</view>

									</view>
									<view class="box-right">
										<view class="count">
											<text class="textLeft"
												@click="$u.throttle(() => {valChange('减', item.spec_type, item.id, item.goods_rule_id, index)}, 500)">-</text>
											<input class="input" type="number" :value="item.num"
												@blur="spacTypeBlur($event,item.spec_type, item.id, item.goods_rule_id,index)" />
											<text class="textRight"
												@click="$u.throttle(() => {valChange('加', item.spec_type, item.id, item.goods_rule_id, index)}, 500)">+</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-list>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="20">
			<view class="popup-box">
				<view class="box-header">
					<view class="yuan"></view>
					<view class="text">规格选择</view>
				</view>
				<view style="margin: 40rpx;" v-if="ruleList.length == 0">暂无规格!</view>
				<view class="box" v-for="(val, index) in ruleList" :key="index">
					<view style="display: inline-block;">{{val.spec_name}}<span
							style="margin-left: 30rpx;color: rgba(3, 185, 209, 1);">￥{{val.money}}</span></view>
					<view class="box-righted">
						<view class="count">
							<text class="textLeft"
								@click="$u.throttle(() => {valChangePopup('减', val.id, index)}, 500)">-</text>
							<input class="input" type="number" :value="val.num"
								@blur="spacTypeBlurPopup($event, val.id, index)" />
							<text class="textRight"
								@click="$u.throttle(() => {valChangePopup('加', val.id, index)}, 500)">+</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		goodsList,
		goodsRule,
		cartCreate,
		goodsCate
	} from "@/api/home.js"
	export default {
		data() {
			return {
				show: false,
				goodsData: [],
				ruleList: [],
				option: {
					page: 1,
					limit: 10,
					auto: false,
					height: null
				},
				fromData: {
					page: 1,
					limit: 10,
					name: '',
					goods_cate_id: ''
				},
				userInfo: {},
				list1: []
			}
		},
		onShow() {
			this.goodsData = []
			this.refresh({
				page: 1
			})
		},
		mounted() {
			this.getGoodsCate()
			const query = uni.createSelectorQuery().in(this);
			query.select('.goodsBox').boundingClientRect(data => {
				this.option.height = data.height
			}).exec();
		},
		methods: {
			click(item) {
				this.fromData.goods_cate_id = item.id
				this.refresh({
					page: 1
				})
			},
			getGoodsCate() {
				goodsCate()
					.then(res => {
						this.list1 = res.data
						this.list1.unshift({
							id: '',
							name: '全部'
						})
					})
			},
			close() {
				this.show = false
			},

			// 规格判断
			valChange(event, customValue, id, goods_rule_id, index) {
				if (customValue == 2) {
					this.getGoodsRule(id)
					this.show = true
				} else {
					this.getCartCreate(event, goods_rule_id, index)
					this.show = false
				}
			},
			// input判断
			spacTypeBlur(event, customValue, id, goods_rule_id, index) {
				if (customValue == 2) {
					this.getGoodsRule(id)
					this.show = true
				} else {
					this.getCartCreateIput(event.detail.value, goods_rule_id, index)
					this.show = false
				}
			},
			// input加
			getCartCreateIput(quantity, id, index) {
				if (quantity <= 0) {
					uni.$u.toast('请填写正确商品数量!')
					return
				}
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 2
				}
				cartCreate(parm)
					.then(res => {
						this.goodsData[index].num = quantity
						uni.$u.toast(res.msg)
					})
			},
			// 加减
			getCartCreate(value, id, index) {
				if (value == '加') {
					this.goodsData[index].num++
				} else if (this.goodsData[index].num == 0) {
					uni.$u.toast('数量为0,不能减少了!')
					return
				} else {
					if (this.goodsData[index].num > 0) {
						this.goodsData[index].num--
					}
				}
				const quantity = value == '加' ? '1' : '-1'
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 1
				}
				cartCreate(parm)
					.then(res => {
						uni.$u.toast(res.msg)
					})
			},
			// 多规格
			valChangePopup(event, id, index) {
				this.getCartCreatePopup(event, id, index)
			},
			// 多规格加减
			getCartCreatePopup(value, id, index) {
				if (value == '加') {
					this.ruleList[index].num++
				} else if (this.ruleList[index].num == 0) {
					uni.$u.toast('数量为0,不能减少了!')
					return
				} else {
					if (this.ruleList[index].num > 0) {
						this.ruleList[index].num--
					}
				}
				const quantity = value == '加' ? '1' : '-1'
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 1
				}
				cartCreate(parm)
					.then(res => {
						uni.$u.toast(res.msg)
					})
			},
			// 多规格 input 
			spacTypeBlurPopup(event, id, index) {
				this.getCartCreateIputPopup(event.detail.value, id, index)
			},
			// 多规格 input加
			getCartCreateIputPopup(quantity, id, index) {
				if (quantity <= 0) {
					uni.$u.toast('请填写正确商品数量!')
					return
				}
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 2
				}
				cartCreate(parm)
					.then(res => {
						this.ruleList[index].num = quantity
						uni.$u.toast(res.msg)
					})
			},
			// 多规格数据
			getGoodsRule(id) {
				const parm = {
					goods_id: id
				}
				goodsRule(parm)
					.then(res => {
						this.ruleList = res.data.map((res) => {
							return {
								...res,
								num: 0
							}
						})
					})
			},
			// 更新
			renew() {
				this.fromData.name = ""
				this.goodsData = []
				this.search()
			},
			load(paging) {
				this.fromData.page = paging.page
				this.search()
			},
			refresh(paging) {
				this.fromData.page = paging.page
				let params = {
					...this.fromData
				}
				goodsList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								num: 0
							}
						})
						this.goodsData = [...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.refreshSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.refreshFail()
					})
			},
			search() {
				let params = {
					...this.fromData
				}
				goodsList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								num: 0
							}
						})
						this.goodsData = [...this.goodsData, ...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.loadSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.loadFail()
					})
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;

		.header {
			width: 100%;
			padding: 60rpx 30rpx;
			box-sizing: border-box;
			background: linear-gradient(135deg, rgba(16, 134, 213, 0) 0%, rgba(3, 185, 209, 0.2) 100%);

			.user_info_wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 30rpx;
				width: 100%;
				height: 82rpx;
				font-size: 32rpx;

				.text {
					font-size: 32rpx;
					font-weight: 400;
					white-space: nowrap;
					color: rgba(37, 38, 38, 1);
				}

				.sarch {
					flex: auto;
				}

				.picture_wrap {
					display: inline-block;
					width: 64rpx;
					height: 64rpx;
					float: right;
					margin-right: 40rpx;
				}
			}

			.swiper {
				margin-top: 40rpx;
			}
		}


		.category {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;
			top: -45rpx;
			left: 0rpx;
			background-color: #fff;

			.category_header {
				margin-top: 30rpx;

				.yuan {
					position: absolute;
					top: 55rpx;
					left: 25rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: rgba(3, 185, 209, 0.3);
				}

				.header_text {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(37, 38, 38, 1);
				}

				.xian {
					height: 2rpx;
					margin-top: 20rpx;
					background: rgba(0, 0, 0, 0.05);
				}
			}

			.goodsBox {
				width: 100%;
				height: calc(100vh - 560rpx);
				overflow-y: scroll;
				padding-top: 20rpx;

				.goods {
					.goods-item {
						display: flex;
						vertical-align: top;
						margin-bottom: 40rpx;
						position: relative;

						.tupian {
							display: inline-block;
							width: 140rpx;
							height: 140rpx;
							margin-right: 30rpx;

						}

						.box {
							display: inline-block;
							width: 440rpx;
							// height: 140rpx;
							margin-left: 20rpx;

							.goods-item-text {
								font-size: 28rpx;
								font-weight: 700;
								color: rgba(37, 38, 38, 1);
							}

							.goods-box {
								display: flex;
								justify-content: flex-end;

								.box-let {
									.box-let-text {
										font-size: 32rpx;
										font-weight: 700;
										color: rgba(3, 185, 209, 1);
									}

									.kucun {
										margin: 20rpx 0rpx;
										font-size: 20rpx;
										font-weight: 500;
										color: rgba(145, 144, 144, 1);
									}
								}

								.box-right {
									margin-left: auto;


									// 商品数量
									.count {
										position: absolute;
										bottom: 25rpx;
										right: 5rpx;

										display: flex;
										justify-content: center;
										align-items: center;
										width: 220rpx;
										height: 48rpx;

										.textLeft {
											font-size: 40rpx;
											width: 44rpx;
											height: 44rpx;
											border-width: 2rpx;
											border-color: #E6E6E6;
											border-style: solid;
											border-radius: 50%;
											text-align: center;
											line-height: 40rpx;
										}

										.input {
											width: 132rpx;
											height: 100%;
											text-align: center;
											border-radius: 4rpx;
											font-size: 24rpx;
											color: #444;
										}

										.textRight {
											font-size: 40rpx;
											width: 44rpx;
											height: 44rpx;
											background-color: rgba(3, 185, 209, 1);
											color: #fff;
											border-radius: 50%;
											text-align: center;
											line-height: 40rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.popup-box {
			width: 100%;
			// height: 314rpx;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.box-header {
				position: relative;

				.yuan {
					position: absolute;
					top: -5rpx;
					left: -5rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: rgba(3, 185, 209, 0.3);
				}

				.text {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(37, 38, 38, 1);
				}
			}

			.box {
				display: flex;
				justify-content: space-between;
				margin: 40rpx 0rpx;
				position: relative;

				.box-righted {
					display: inline-block;

					// 商品数量
					.count {
						position: absolute;
						bottom: 0rpx;
						right: 5rpx;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 48rpx;

						.textLeft {
							font-size: 40rpx;
							width: 44rpx;
							height: 44rpx;
							border-width: 2rpx;
							border-color: #E6E6E6;
							border-style: solid;
							border-radius: 50%;
							text-align: center;
							line-height: 40rpx;
						}

						.input {
							width: 132rpx;
							height: 100%;
							text-align: center;
							border-radius: 4rpx;
							font-size: 24rpx;
							color: #444;
						}

						.textRight {
							font-size: 40rpx;
							width: 44rpx;
							height: 44rpx;
							background-color: rgba(3, 185, 209, 1);
							color: #fff;
							border-radius: 50%;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>